<template>
  <div>
    <ul class="m-footer">
      <li v-for="(item,index) in nav_foot" :key="index" :class="{'on':idx==index}" @click="footEvent(index,item.pathName)">
        <img :src="item.icon_on" alt="" v-if="idx==index">
        <img :src="item.icon" alt="" v-else>
        <p>{{item.text}}</p>
      </li>
    </ul>
  </div>

</template>
<script>
  export default {
    name: '',
    data() {
      return {
        nav_foot: [{
          icon: require('@/assets/images/appoint.png'),
          icon_on: require('@/assets/images/appoint_on.png'),
          text: '预约',
          pathName: 'appointment',
        }, {
          icon: require('@/assets/images/share.png'),
          icon_on: require('@/assets/images/share_on.png'),
          text: '分享',
          pathName: 'share',
        }, {
          icon: require('@/assets/images/shop.png'),
          icon_on: require('@/assets/images/shop_on.png'),
          text: '首页',
          pathName: 'index',
        }, {
          icon: require('@/assets/images/cart.png'),
          icon_on: require('@/assets/images/cart_on.png'),
          text: '购物车',
          pathName: 'cart',
        }, {
          icon: require('@/assets/images/my.png'),
          icon_on: require('@/assets/images/my_on.png'),
          text: '我的',
          pathName: 'mine',
        }],
        idx: 2,
      }
    },
    methods: {
      footEvent(index, pathName) {
        this.idx = index;
        this.$router.replace({
          name: pathName
        });
      }
    },
    mounted() {
      let that = this;
      let pathName = that.title || that.$route.name;
      switch (pathName) {
        case 'appointment':
        case 0:
          this.idx = 0;
          break;
        case 'share':
        case 1:
          this.idx = 1;
          break;
        case 'index':
        case 2:
          this.idx = 2;
          break;
        case 'cart':
        case 3:
          this.idx = 3;
          break;
        case 'mine':
        case 4:
          this.idx = 4;
          break;
        default:
          break;
      }

    },
    props: ['title']
  }

</script>
<style lang="less" scoped>
  .m-footer {
    .flex;
    background: white;
    padding: .2rem 0;
    font-size: .9rem;

    li {
      flex: 1;
      text-align: center;
      color: @secondary-gray;

      img {
        width: 32%;
      }

      &.on {
        color: @primary-red;
      }
    }
  }

</style>
